<!-- 表单属性组件 -->
<template>
    <div class="form-config-container">
        <el-form label-position="left">
            <el-form-item label="组件尺寸">
                <el-radio-group v-model="data.size">
                    <el-radio-button label="medium">
                        中等
                    </el-radio-button>
                    <el-radio-button label="small">
                        较小
                    </el-radio-button>
                    <el-radio-button label="mini">
                        迷你
                    </el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="标签对齐">
                <el-radio-group v-model="data.labelPosition">
                    <el-radio-button label="left">
                        左
                    </el-radio-button>
                    <el-radio-button label="right">
                        右
                    </el-radio-button>
                    <el-radio-button label="top">
                        顶部
                    </el-radio-button>
                </el-radio-group>
            </el-form-item>


            <el-form-item label="宽度">
                <el-input class="custom_input" v-model="data.labelWidth"></el-input>
            </el-form-item>


            <el-form-item label="表单名称">
                <el-input class="custom_input" v-model="data.formName"></el-input>

            </el-form-item>
            <el-form-item label="表单序列号">
                <el-input class="custom_input" v-model="data.formNumber" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="自定义样式">
                <el-input class="custom_input" type="textarea" :rows="2"
                          v-model="data.customStyle"></el-input>
            </el-form-item>
            <el-form-item label="自定义Class">
                <el-input class="custom_input" v-model="data.customClass" clearable></el-input>
            </el-form-item>


            <el-form-item label="是否查看">
                <el-checkbox v-model="data.disable" @change="changeDisable"></el-checkbox>
            </el-form-item>
            <el-form-item label="显示批注">
                <el-checkbox v-model="data.showAnnotation" @change="changeShowAnnotation"></el-checkbox>
            </el-form-item>


            <el-form-item label="布局" label-width="50px">
                <el-col :span="30">
                    <el-radio-group v-model="radio1" @change="layOutChange($event)">
                        <el-radio-button label="24">单列</el-radio-button>
                        <el-radio-button label="12">两列</el-radio-button>
                        <el-radio-button label="8">三列</el-radio-button>
                        <el-radio-button label="6">四列</el-radio-button>
                    </el-radio-group>
                </el-col>
            </el-form-item>


        </el-form>
    </div>
</template>

<script>
    import MakingForm from './Container.vue'


    export default {
        props: ['data', 'form'],  // 父组件传递的data
        components: {
            MakingForm
        },
        mounted() {

        },

        data() {
            return {
                radio1: 12
            };
        },
        methods: {
            getA() {
            },
            changeDisable(disabled) {
                this.changeDisableFun(disabled);
            },
            changeShowAnnotation(disabled) {
                this.changeShowAnnotationFun(disabled);
            },
            changeDisableFun: function (val) {
                var list = this.form.list;
                this.changeDisableAction(list, val);

            },
            changeShowAnnotationFun: function (val) {
                var list = this.form.list;
                this.changeShowAnnotationAction(list, val);

            },
            changeShowAnnotationAction: function (list, val) {
                list.forEach(item => {
                    if (item.options) {
                        item.options.showAnnotation = val;
                    } else {
                        list = item
                        this.changeDisableAction(list, val)
                    }

                    if (item.tabColumns) {
                        list = item.tabColumns
                        this.changeShowAnnotationAction(list, val)
                    }
                    if (item.tableColumns) {
                        list = item.tableColumns
                        this.changeShowAnnotationAction(list, val)
                    }
                })
            },
            changeDisableAction: function (list, val) {
                list.forEach(item => {
                    if (item.options) {
                        item.options.disabled = val;
                    } else {
                        list = item
                        this.changeDisableAction(list, val)
                    }

                    if (item.tabColumns) {
                        list = item.tabColumns
                        this.changeDisableAction(list, val)
                    }
                    if (item.tableColumns) {
                        list = item.tableColumns
                        this.changeDisableAction(list, val)
                    }
                })
            },
            layOutChange: function (val) {

                this.$emit('getjson', val);
            },
            childMethod() {


            }
        },
        watch: {
            data() {
                this.$nextTick(_ => {
                })
            },
            disable(val, oldVal) {
            },
        }
    }
</script>
<style type="text/css">
    .custom_input {
        width: auto !important;
    }
</style>
